<#include "../base.ftl"/>

<#macro title>
    地图测试页
</#macro>

<#macro cssfile>
</#macro>

<#macro scriptfile>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=zh-cn"></script>
<script type="text/javascript" src="libs/gmap3/gmap3.min.js"></script>
</#macro>

<#macro breadcrumb>
    <ul class="breadcrumb">
     <li><a href="index.html">Home</a> <span class="divider">/</span></li>
     <li class="active">地图测试页</li>
    </ul>
</#macro>

<#macro main>
    <div id="my_map">
    </div> 
    
    <div id="map-canvas">
    </div>
</#macro>

<#macro jsscript>
    $("#my_map").width("700px").height("500px").gmap3({
     map:{
        options:{ 
          center:[22.547619541717044,114.89253218383784], 
          zoom:6
        }
      },
      //定位多个点
      marker:{
        values:[
          {latLng:[48.8620722, 2.352047], data:"Paris !"},
          {address:"86000 Poitiers, France", data:"Poitiers : great city !"},
          {address:"66000 Perpignan, France", data:"Perpignan ! GO USAP !"}
        ],
        options:{
          draggable: false
        },
        events:{
          mouseover: function(marker, event, context){
            var map = $(this).gmap3("get"),
              infowindow = $(this).gmap3({get:{name:"infowindow"}});
            if (infowindow){
              infowindow.open(map, marker);
              infowindow.setContent(context.data);
            } else {
              $(this).gmap3({
                infowindow:{
                  anchor:marker, 
                  options:{content: context.data}
                }
              });
            }
          },
          mouseout: function(){
            var infowindow = $(this).gmap3({get:{name:"infowindow"}});
            if (infowindow){
              infowindow.close();
            }
          }
        }
      },
      //画线
      polyline:{
        options:{
          strokeColor: "#FF0000",
          strokeOpacity: 1.0,
          strokeWeight: 2,
          path:[
            [22.547619541717044,114.89253218383784],
            [22.371528409636113, 115.53145582885737],
            [22.665839467203877, 116.81136305541986],
            [23.16168884125887,117.84957106323236],
            [23.811595326004557,119.01961500854486],
            [24.61817027072198,119.06905348510736],
            [24.800780467458654,118.69002516479486]
          ]
        }
      }   
    });
</#macro>